<template>
    <div ref="horizBarChartRef" :class="className" :style="{ height: height, width: width }" />
  </template>
  
  <script setup>
  import * as echarts from "echarts";
  
  const props = defineProps({
    dataXArray: {//数量
      type: Array,
      default: () => [],
    },
    dataYArray: {//名称
      type: Array,
      default: () => [],
    },
    className: {
      type: String,
      default: "horizBarChart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "310px",
    },
  })
  const className = props.className;
  const width = props.width;
  const height = props.height;
  const horizBarChartRef = ref(null);
  let myChart = null;
  
  onMounted(() => {
    if (horizBarChartRef.value) {
      initChart();
    }
  });
  
  watch(
    () => props.dataXArray,
    (newValue) => {
      initChart();
    },
  )

  // 组件卸载前销毁图表，避免内存泄露
  onUnmounted(() => {
    if (myChart) {
      myChart.dispose();
    }
  });
  
  function initChart() {
    myChart = echarts.init(horizBarChartRef.value, "macarons");
    myChart.setOption({
        grid: {
            top: '5%',
            left: '4.5%',
            containLabel: true
        },
        xAxis: {
            max: 'dataMax',
            type: 'value',
            show: false,
            axisLine: {
                show: false
            },
            axisLabel: {
                show: true,
                color: '#fff',  
                fontSize: 14
            }
        },
        yAxis: {
            type: 'category',
            data: props.dataYArray,
            inverse: true,
            animationDuration: 300,
            animationDurationUpdate: 300,
            max: 5,
            axisLabel: {
                show: true,
                interval: 0,
                //rotate: 45,
                textStyle: {
                    fontSize: 14,
                    color: '#fff'
                },
                //设置字数限制
                formatter: function(value) {
                  if (value.length > 6) {
                    return value.substring(0, 6) + "...";
                  } else {
                    return value;
                  }
                }
            }
        },        
        series: [
            {
                realtimeSort: true,
                type: 'bar',
                data: props.dataXArray,
                barWidth: 10, // 设置柱子宽度
                itemStyle: {
                    normal: {
                        color: function(params) {
                            //给每个柱子设置不同的颜色 #4048EF 0da2ff ['#5083f8','#ff6b6b','#84ff7e','#ca8622','#F44E60','#94a7ff']
                            // let colorList = ['#5083f8','#f76381','#84ff7e','#ca8622','#F44E60','#94a7ff'];
                            // return colorList[params.dataIndex]
                            var index = params.dataIndex;
                            if (index == 0) {
                                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                                    offset: 0,
                                    color: '#11efff'
                                },
                                {
                                    offset: 1,
                                    color: '#0d9eff'
                                }
                                ]);
                            } else if (index == 1) {
                                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                                    offset: 0,
                                    color: '#ffca5a'
                                },
                                {
                                    offset: 1,
                                    color: '#ff504a'
                                }
                                ]);
                            } else if (index == 2) {
                                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                                    offset: 0,
                                    color: '#11efff'
                                },
                                {
                                    offset: 1,
                                    color: '#0d9eff'
                                }
                                ]);
                            } else if (index == 3) {
                                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                                    offset: 0,
                                    color: '#ffca5a'
                                },
                                {
                                    offset: 1,
                                    color: '#ff504a'
                                }
                                ]);
                            } else if (index == 4) {
                                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                                    offset: 0,
                                    color: '#11efff'
                                },
                                {
                                    offset: 1,
                                    color: '#0d9eff'
                                }
                                ]);
                            }

                        }
                    }
                },
                label: {
                    show: true,
                    position: 'right',
                    valueAnimation: true,
                    color: '#fff',
                    fontSize: 14
                }
            }
        ],
        legend: {
            show: true
        },
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
    });
    window.addEventListener("resize", () => {
      myChart.resize();
    });
  }
  </script>
  